<template>
	<div id="">
		<div id="top">
			<van-row id="tops">
				<van-col span="2" @click="goback">
					<van-icon name="arrow-left" size="20" />
				</van-col>
				<van-col span="20">
					<van-search v-model="value" placeholder="苹果电脑" autofocus="true" />
				</van-col>
				<van-col span="2" @click="search">搜索</van-col>
			</van-row>
			<div id="" v-if="isshow">
				<div class="search_body">
					<div class="search_body_body">
						<div>
							<div id="hhh">
								<h3>热搜</h3>
								<h3 @click="del">
									<van-icon name="delete-o" />
								</h3>
							</div>
							<div class="menu">
								<div v-for="(item,index) in xq" @click="go(index)">
									{{item}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="content" v-for="item in sear"
				@click="$router.push({path:'/details',query:{goods_id:item.goods_id}})">
				<div id="content-img">
					<img v-lazy="url+item.original_img">
				</div>
				<div id="content-content">
					<div id="wen">
						{{item.goods_name}}
					</div>
					<div id="wen">
						{{item.goods_remark}}
					</div>
					<div id="Price">
						<div id="price">
							<span>￥{{item.shop_price}}</span>
						</div>
						<div id="price">
							<span>库存量:{{item.store_count}}</span>
						</div>
					</div>
				</div>
			</div>
			<div id="" v-if="ishave">
				查无此商品
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				// sou: '',
				sear: [],
				isshow: true,
				url: '',
				xq: [],
				ishave: false
			}
		},
		created() {
			this.$store.dispatch('user/vuexUrl', '地址')
				.then(e => {
					this.url = e
					console.log(e)
				})

		},
		methods: {
			goback() {
				this.$router.go(-1)
			},
			go(index) {
				// 输入的值
				this.value = this.xq[index]
				this.search()
			},
			search() {
				// .then异步函数  promise
				this.$store.dispatch('user/vuexSearch', this.value)
					.then(e => {
						this.sear = e.data.data
						this.isshow = false
						if (this.sear.length == 0) {
							this.ishave = true
						} else {
							this.ishave = false
						}
						if (this.value !== '') {
							let val = this.value.trim()
							if (!val) {
								return
							}
							// 如果值为真返回的是当前第一个的下标
							if (this.xq.indexOf(val) === -1) {
								this.xq.unshift(val)
								// 切割
								this.xq = this.xq.slice(0, 10)
								// 把数组转换成一个json的字符串
								localStorage.setItem('history', JSON.stringify(this.xq))
							}
							console.log(e)
						}
					})
			},
			del() {
				localStorage.removeItem('history')
				this.xq = []
			}
		},
		// DOM渲染完成，组件挂载完成 
		// 挂载后
		mounted() {
			if (JSON.parse(localStorage.getItem('history'))) {
				this.xq = JSON.parse(localStorage.getItem('history'))
			}
		},
	}
</script>

<style>
	#top {
		width: 100vw;
		height: 100vh;
		font-size: 0.3rem;

	}

	#tops {
		width: 100vw;
		line-height: 6.5vh;
	}

	#content {
		width: 100vw;
		height: 15vh;
		display: flex;
		line-height: 2vh;
		margin-top: 1vh;
		box-shadow: 2px 2px 2px 2px #f1f1f1;
		border-radius: 10px;
		margin-top: 1vh;
	}

	#content #content-img {
		width: 30vw;
	}

	#content #content-img img {
		width: 100%;
		height: 80%;
	}

	#content #content-content {
		width: 70vw;
	}

	#wen {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 1vh;
		/* margin-left: 4vw; */
		width: 100%;
		font-size: 0.3rem;
		text-align: left;
	}

	#price {
		color: red;
		text-align: left;
		width: 50vw;
	}

	#Price {
		display: flex;
		margin-top: 1vh;
	}

	.search_body {
		width: 100%;
	}

	.search_body_body {
		text-align: left;
		width: 92%;
		margin-left: 4%;
	}

	.menu {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.menu div {
		font-size: 0.25rem;
		padding: 1vh 4%;
		margin: 1vh 3% 1vh 0;
		background-color: #f4f4f4;
		border-radius: 50px;
	}

	#hhh {
		width: 100vw;
		display: flex;
	}

	#hhh h3:nth-child(1) {
		width: 20vw;
	}

	#hhh h3:nth-child(2) {
		width: 20vw;
		margin-left: 75vw;
	}
</style>
